<template>
  <div class="bgc">
 <!-- //头部导航栏区域 -->
 <div class="header">
    <NavIndex></NavIndex>
  </div>

  <div class="blog-container">
    <div class="blog-grid">
      <div v-for="(blog, index) in blogs" :key="index" class="blog-card">
        <div class="image-container">
          <img :src="blog.image" :alt="blog.title" class="blog-image">
          <div class="info-overlay">
            <h3 class="blog-title">{{ blog.title }}</h3>
            <div class="blog-tags">
              <span class="tag">技术</span>
              <span class="tag">前端</span>
            </div>
            <button class="read-more-btn" @click="goToBlogDetail(blog.id)">阅读更多</button>
            <div class="blog-stats">
              <span class="stat">
                <el-icon><Apple /></el-icon>
                <span>{{ blog.likes }}</span>
              </span>
              <span class="stat">
                <el-icon><View /></el-icon>
                
                <span>{{ blog.views }}</span>
              </span>
              <span class="stat">
                <el-icon><Star /></el-icon>
                <span>{{ blog.bookmarks }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="floating-button" @click="goToBlogWrite">
    <el-icon><EditPen /></el-icon>
  </div>
  </div>
 
</template>

<script>
  import NavIndex from "@/components/topNav/topNavIndex.vue";
export default {
  name: 'BlogIndex',
  components: {
    NavIndex,
  },
  methods: {
    goToBlogDetail(id) {
      this.$router.push(`/blog/detail/${id}`);
    },
    goToBlogWrite() {
      this.$router.push('/blog/write');
    }
  },
  data() {
    return {
      blogs: [
        {
          id: 1,
          title: 'Vue.js 3.0 新特性详解',
          description: 'Vue.js 3.0带来了许多令人兴奋的新特性和性能提升...',
          image: '/src/views/blog/imgs/img (1).jpg',
          views: 1234,
          likes: 56,
          bookmarks: 23,
          content: `<h2>Vue.js 3.0 新特性详解</h2>
            <p>Vue.js 3.0是Vue框架的一次重大升级，带来了许多显著的改进和新特性。本文将详细介绍这些变化。</p>
            <h3>组合式API (Composition API)</h3>
            <p>组合式API是Vue 3最大的亮点，它提供了一种更灵活的方式来组织组件逻辑。通过setup函数，我们可以将相关的逻辑代码组合在一起，提高代码的可读性和可维护性。</p>
            <pre><code>
            import { ref, computed, onMounted } from 'vue'
            
            export default {
              setup() {
                const count = ref(0)
                const doubleCount = computed(() => count.value * 2)
                
                function increment() {
                  count.value++
                }
                
                onMounted(() => {
                  console.log('组件已挂载')
                })
                
                return {
                  count,
                  doubleCount,
                  increment
                }
              }
            }
            </code></pre>
            <h3>Teleport 组件</h3>
            <p>Teleport提供了一种干净的方法，允许我们控制在DOM中的哪个父节点下渲染HTML，而不必求助于全局状态或将其拆分为两个组件。</p>
            <h3>性能提升</h3>
            <p>Vue 3在性能方面有显著提升：</p>
            <ul>
              <li>更小的包体积</li>
              <li>更好的Tree-shaking支持</li>
              <li>虚拟DOM重写</li>
              <li>编译器优化</li>
            </ul>`,
          author: '张三',
          date: '2023-05-15'
        },
        {
          id: 2,
          title: 'CSS Grid布局完全指南',
          description: '探索CSS Grid布局的强大功能和实用技巧...',
          image: '/src/views/blog/imgs/img (2).jpg',
          views: 890,
          likes: 45,
          bookmarks: 18,
          content: `<h2>CSS Grid布局完全指南</h2>
            <p>CSS Grid是一个强大的布局系统，它允许开发者创建复杂的网格布局，同时保持HTML结构的简洁。</p>
            <h3>基本概念</h3>
            <p>使用CSS Grid布局，我们需要了解几个核心概念：</p>
            <ul>
              <li>Grid Container: 应用display: grid的元素</li>
              <li>Grid Item: Grid Container的直接子元素</li>
              <li>Grid Line: 构成网格结构的线</li>
              <li>Grid Cell: 网格中的单个单元格</li>
              <li>Grid Area: 由多个网格单元格组成的矩形区域</li>
            </ul>
            <h3>创建一个基本网格</h3>
            <pre><code>
            .grid-container {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              grid-template-rows: 100px 200px;
              gap: 10px;
            }
            </code></pre>
            <p>这段代码创建了一个三列网格，每列宽度相等（1fr），有两行，行高分别为100px和200px，网格项之间有10px的间隙。</p>
            <h3>放置元素</h3>
            <p>使用grid-column和grid-row属性，我们可以精确控制元素在网格中的位置和跨度：</p>
            <pre><code>
            .item {
              grid-column: 1 / 3; /* 从第1条线到第3条线，即跨越2列 */
              grid-row: 1 / 2;    /* 从第1条线到第2条线，即占据第1行 */
            }
            </code></pre>`,
          author: '李四',
          date: '2023-06-22'
        },
        {
          id: 3,
          title: 'JavaScript异步编程实践',
          description: '从回调到Promise再到Async/Await的完整异步编程指南...',
          image: '/src/views/blog/imgs/img (1).jpg',
          views: 1578,
          likes: 89,
          bookmarks: 42,
          content: `<h2>JavaScript异步编程实践</h2>
            <p>JavaScript中处理异步操作的方式随着语言的发展经历了多次变革。本文将带您了解从早期的回调函数到现代的async/await语法的完整演变历程。</p>
            <h3>回调函数</h3>
            <p>早期JavaScript中处理异步操作的主要方式是使用回调函数：</p>
            <pre><code>
            function fetchData(callback) {
              setTimeout(() => {
                const data = { name: 'John', age: 30 };
                callback(data);
              }, 1000);
            }
            
            fetchData((data) => {
              console.log(data); // 一秒后打印: { name: 'John', age: 30 }
            });
            </code></pre>
            <p>但这种方式容易导致回调地狱（Callback Hell）。</p>
            <h3>Promise</h3>
            <p>ES6引入了Promise，大大改善了异步代码的可读性：</p>
            <pre><code>
            function fetchData() {
              return new Promise((resolve, reject) => {
                setTimeout(() => {
                  const data = { name: 'John', age: 30 };
                  resolve(data);
                }, 1000);
              });
            }
            
            fetchData()
              .then(data => console.log(data))
              .catch(error => console.error(error));
            </code></pre>
            <h3>Async/Await</h3>
            <p>ES2017引入的async/await语法使异步代码看起来更像同步代码：</p>
            <pre><code>
            async function getData() {
              try {
                const data = await fetchData();
                console.log(data);
              } catch (error) {
                console.error(error);
              }
            }
            
            getData();
            </code></pre>`,
          author: '王五',
          date: '2023-07-10'
        },
        {
          id: 4,
          title: 'React Hooks深入浅出',
          description: '全面解析React Hooks的使用方法与最佳实践...',
          image: '/src/views/blog/imgs/img (2).jpg',
          views: 2145,
          likes: 132,
          bookmarks: 67,
          content: `<h2>React Hooks深入浅出</h2>
            <p>React Hooks是React 16.8引入的新特性，它让开发者可以在不编写class的情况下使用state以及其他的React特性。</p>
            <h3>useState</h3>
            <p>useState是最基本的Hook，它让函数组件可以拥有自己的state：</p>
            <pre><code>
            import React, { useState } from 'react';
            
            function Counter() {
              const [count, setCount] = useState(0);
              
              return (
                <div>
                  <p>You clicked {count} times</p>
                  <button onClick={() => setCount(count + 1)}>
                    Click me
                  </button>
                </div>
              );
            }
            </code></pre>
            <h3>useEffect</h3>
            <p>useEffect让你在函数组件中执行副作用操作，如数据获取、订阅或手动更改DOM：</p>
            <pre><code>
            import React, { useState, useEffect } from 'react';
            
            function Example() {
              const [count, setCount] = useState(0);
              
              useEffect(() => {
                document.title = \`You clicked \${count} times\`;
                
                return () => {
                  // 清除操作
                };
              }, [count]); // 仅在count更改时更新
              
              return (
                <div>
                  <p>You clicked {count} times</p>
                  <button onClick={() => setCount(count + 1)}>
                    Click me
                  </button>
                </div>
              );
            }
            </code></pre>
            <h3>自定义Hook</h3>
            <p>自定义Hook是一种复用状态逻辑的机制，它不复用state本身，而是复用状态逻辑：</p>
            <pre><code>
            function useWindowSize() {
              const [size, setSize] = useState({ width: 0, height: 0 });
              
              useEffect(() => {
                function updateSize() {
                  setSize({ width: window.innerWidth, height: window.innerHeight });
                }
                
                window.addEventListener('resize', updateSize);
                updateSize();
                
                return () => window.removeEventListener('resize', updateSize);
              }, []);
              
              return size;
            }
            </code></pre>`,
          author: '赵六',
          date: '2023-08-05'
        },
        {
          id: 5,
          title: '移动端适配方案详解',
          description: '解析移动端Web开发中常见的适配方案及其优缺点...',
          image: '/src/views/blog/imgs/img (1).jpg',
          views: 1632,
          likes: 94,
          bookmarks: 51,
          content: `<h2>移动端适配方案详解</h2>
            <p>随着移动设备的普及，如何让网页在不同尺寸的屏幕上都能有良好的显示效果成为前端开发中的重要课题。</p>
            <h3>视口设置</h3>
            <p>正确设置视口是移动端适配的第一步：</p>
            <pre><code>
            &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
            </code></pre>
            <h3>rem适配方案</h3>
            <p>rem是相对于根元素(html)的字体大小的单位，我们可以通过修改根元素的字体大小来实现不同设备的适配：</p>
            <pre><code>
            (function() {
              function setRootFontSize() {
                const width = document.documentElement.clientWidth;
                const fontSize = (width / 375) * 16;
                document.documentElement.style.fontSize = fontSize + 'px';
              }
              
              setRootFontSize();
              window.addEventListener('resize', setRootFontSize);
            })();
            
            /* CSS */
            .element {
              width: 10rem; /* 相当于设计稿上的160px (假设基准字体为16px) */
            }
            </code></pre>
            <h3>vw/vh适配方案</h3>
            <p>vw和vh是相对于视口宽度和高度的单位，1vw等于视口宽度的1%，1vh等于视口高度的1%：</p>
            <pre><code>
            /* 假设设计稿宽度为375px */
            .element {
              width: calc(100px / 375 * 100vw); /* 将100px转换为vw单位 */
            }
            </code></pre>
            <h3>flexbox和grid布局</h3>
            <p>使用flexbox和grid这样的现代布局技术，可以创建更灵活的响应式设计：</p>
            <pre><code>
            .container {
              display: flex;
              flex-wrap: wrap;
            }
            
            .item {
              flex-basis: 100%;
            }
            
            @media (min-width: 768px) {
              .item {
                flex-basis: 50%;
              }
            }
            
            @media (min-width: 1024px) {
              .item {
                flex-basis: 33.333%;
              }
            }
            </code></pre>`,
          author: '钱七',
          date: '2023-09-18'
        },
        {
          id: 6,
          title: 'TypeScript高级类型实战',
          description: '深入探讨TypeScript中的高级类型和类型编程技巧...',
          image: '/src/views/blog/imgs/img (2).jpg',
          views: 1423,
          likes: 83,
          bookmarks: 47,
          content: `<h2>TypeScript高级类型实战</h2>
            <p>TypeScript的类型系统非常强大，它不仅提供了基本的类型检查，还支持高级的类型操作和类型编程。</p>
            <h3>交叉类型与联合类型</h3>
            <p>交叉类型（&）将多个类型合并为一个类型，联合类型（|）表示一个值可以是几种类型之一：</p>
            <pre><code>
            // 交叉类型
            type Person = {
              name: string;
              age: number;
            };
            
            type Employee = {
              employeeId: string;
              department: string;
            };
            
            type EmployeePerson = Person & Employee;
            
            // 联合类型
            type ID = string | number;
            
            function printId(id: ID) {
              console.log(id);
            }
            </code></pre>
            <h3>类型守卫</h3>
            <p>类型守卫让你可以缩小联合类型的范围：</p>
            <pre><code>
            function isString(value: any): value is string {
              return typeof value === 'string';
            }
            
            function processValue(value: string | number) {
              if (isString(value)) {
                // 在这个块中，value的类型被缩小为string
                console.log(value.toUpperCase());
              } else {
                // 在这个块中，value的类型被缩小为number
                console.log(value.toFixed(2));
              }
            }
            </code></pre>
            <h3>映射类型</h3>
            <p>映射类型允许你从一个现有的类型创建一个新类型，通过遍历现有类型的属性：</p>
            <pre><code>
            type Readonly<T> = {
              readonly [P in keyof T]: T[P];
            };
            
            type Partial<T> = {
              [P in keyof T]?: T[P];
            };
            
            type Person = {
              name: string;
              age: number;
            };
            
            // 所有属性都是只读的
            type ReadonlyPerson = Readonly<Person>;
            
            // 所有属性都是可选的
            type PartialPerson = Partial<Person>;
            </code></pre>
            <h3>条件类型</h3>
            <p>条件类型根据一个条件选择不同的类型：</p>
            <pre><code>
            type IsString<T> = T extends string ? true : false;
            
            // 结果: true
            type A = IsString<'hello'>;
            
            // 结果: false
            type B = IsString<123>;
            </code></pre>`,
          author: '孙八',
          date: '2023-10-30'
        }
      ]
    }
  }
}
</script>

<style scoped>
.bgc {
  background: linear-gradient(to right, rgb(10, 2, 13), rgb(51, 45, 53));
  min-height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
}
.header {
  height: 70px;
}
.blog-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}

.blog-card {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.blog-card:hover {
  transform: translateY(-5px);
}

.image-container {
  position: relative;
  width: 100%;
  height: 270px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
}

.blog-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.info-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(8px);
  color: white;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  opacity: 0;
}

.image-container:hover .info-overlay {
  opacity: 1;
}

.blog-title {
  margin: 0 0 10px;
  font-size: 1.2em;
}

.blog-tags {
  display: flex;
  gap: 8px;
}

.tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8em;
}

.blog-stats {
  display: flex;
  justify-content: space-around;
  margin-top: auto;
}

.stat {
  display: flex;
  align-items: center;
  gap: 5px;
}

.stat i {
  font-size: 1.1em;
}

.read-more-btn {
  width: 100%;
  padding: 8px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.read-more-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}



.floating-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  animation: glow 2s infinite;
  z-index: 1000;
}

.floating-button i {
  font-size: 24px;
  color: #333;
}

@keyframes glow {
  0% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.8);
  }
  100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
  }
}
</style>